<template>
  <div class="person_info_wrap">
    <div class="person_wrap">
      <div class="person_title gl_clear">
        <div class="person_face_wrap gl_fl">
          <img v-if="userInfo.imagePath" class="person_face" :src="getStaticPhotoUrl(userInfo.imagePath)">
        </div>
        <div class="gl_fl">
          <div class="person_name gl_clear">
            <div class="name gl_fl">{{ userInfo.name }}</div>
            <div class="gender gl_fl">
              <span v-if="userInfo.genderCode === 'M'">男</span>
              <span v-if="userInfo.genderCode === 'W'">女</span>
            </div>
          </div>
          <div class="person_mobile">{{ userInfo.phoneNumber }}</div>
        </div>
      </div>
    </div>
    <!-- tab -->
    <div class="tab_bar_wrap">
      <div class="tab_bar">
        <div v-if="tabStyle.length" class="tab_line" :style="{width: tabStyle[active].width, transform: 'translateX(' + tabStyle[active].tx + ')'}" />
        <div v-for="(item, index) in tabList" :key="index" class="tab_bar_item" :class="{active: active === index }" @click="chooseTab(index)">
          {{ item.name }}
        </div>
      </div>
    </div>

    <div class="tab_panel_wrap">
      <!-- 基础资料 -->
      <div v-if="active === 0 && userInfo.id" class="tab_panel">
        <div class="info_row">
          <div class="info_label">姓名</div>
          <div class="info_content">{{ userInfo.name }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">性别</div>
          <div class="info_content">{{ findDictDataByCode('gender', userInfo.genderCode) }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">证件类型</div>
          <div class="info_content">{{ findDictDataByCode('idCardType', userInfo.idCardTypeCode) }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">证件号码</div>
          <div class="info_content">{{ userInfo.idCardNumber }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">出生日期</div>
          <div class="info_content">{{ userInfo.birthDate ? userInfo.birthDate.slice(0, 10).replace(/-/g, '.') : '' }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">国籍</div>
          <div class="info_content">{{ userInfo.nationalityName }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">民族</div>
          <div class="info_content">{{ findDictDataByCode('nation', userInfo.national) }}</div>
        </div>
        <!-- <div class="info_row">
          <div class="info_label">身高</div>
          <div class="info_content">{{ userInfo.height }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">体重</div>
          <div class="info_content">{{ userInfo.weight }}</div>
        </div> -->
        <div class="info_row">
          <div class="info_label">联系方式</div>
          <div class="info_content">{{ userInfo.phoneNumber }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">地址</div>
          <div class="info_content">{{ userInfo.address }}</div>
        </div>
      </div>
      <!-- 会员资料 -->
      <div v-if="active === 1 && userInfo.id" class="tab_panel">
        <div class="info_row">
          <div class="info_label">所属协会</div>
          <div class="info_content">
            {{ findDictDataByCode('district', userInfo.parentTAProvinceCode) }}
            {{ findDictDataByCode('district', userInfo.parentTACityCode) }}
            {{ findDictDataByCode('district', userInfo.parentTACountyCode) }}
          </div>
        </div>
        <div class="info_row">
          <div class="info_label">中跆协会员号</div>
          <div class="info_content">{{ userInfo.ctaMemberId }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">中跆协会员到期日</div>
          <div class="info_content">{{ userInfo.ctaMemberExipry ? userInfo.ctaMemberExipry.slice(0, 10) : '' }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">中跆协证书</div>
          <div class="info_content">
            <template v-for="item in 6">
              <div v-if="userInfo['ctaMemberImageUrl' + item]" :key="item">
                <img class="certificate_img" :src="getStaticPhotoUrl(userInfo['ctaMemberImageUrl' + item])" alt="">
              </div>
            </template>
          </div>
        </div>
        <!-- {{ userInfo.ctaMemberImageUrl1 }} -->
        <!-- <div class="info_row">
          <div class="info_label">省台协会员号</div>
          <div class="info_content">{{ userInfo.ctkCode }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">省台协会员到期日</div>
          <div class="info_content">{{ userInfo.name }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">省台协证书</div>
          <div class="info_content">{{ userInfo.name }}</div>
        </div> -->
      </div>
      <!-- 级段位信息 -->
      <div v-if="active === 2 && userInfo.id" class="tab_panel">
        <!-- 中跆协段位 -->
        <div class="info_row">
          <div class="info_label">中跆协级位</div>
          <div class="info_content">{{ userInfo.ctaBeltLevel ? userInfo.ctaBeltLevel + '级' : '' }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">中跆协级位编号</div>
          <div class="info_content">{{ userInfo.ctaBeltLevelId }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">中跆协级位证书</div>
          <div class="info_content">
            <template v-for="item in 6">
              <div v-if="userInfo['ctaBeltLevelImageUrl' + item]" :key="item">
                <img class="certificate_img" :src="getStaticPhotoUrl(userInfo['ctaBeltLevelImageUrl' + item])" alt="">
              </div>
            </template>
          </div>
        </div>
        <!-- 中跆协级位 -->
        <div class="info_row">
          <div class="info_label">中跆协段位</div>
          <div class="info_content">{{ userInfo.ctaBeltDuan ? userInfo.ctaBeltDuan + '段' : '' }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">中跆协段位编号</div>
          <div class="info_content">{{ userInfo.ctaBeltDuanId }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">中跆协段位证书</div>
          <div class="info_content">
            <template v-for="item in 6">
              <div v-if="userInfo['ctaBeltDuanImageUrl' + item]" :key="item">
                <img class="certificate_img" :src="getStaticPhotoUrl(userInfo['ctaBeltDuanImageUrl' + item])" alt="">
              </div>
            </template>
          </div>
        </div>
        <!-- 国际台协级位 -->
        <div class="info_row">
          <div class="info_label">国际段位</div>
          <div class="info_content">{{ userInfo.wtaBeltLevel ? userInfo.wtaBeltLevel + '段' : '' }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">国际段位证书编号</div>
          <div class="info_content">{{ userInfo.wtaBeltId }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">国际段位证书名称(英文)</div>
          <div class="info_content">{{ userInfo.wtaBeltName }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">国际段位证书</div>
          <div class="info_content">
            <template v-for="item in 6">
              <div v-if="userInfo['wtaBeltImageUrl' + item]" :key="item">
                <img class="certificate_img" :src="getStaticPhotoUrl(userInfo['wtaBeltImageUrl' + item])" alt="">
              </div>
            </template>
          </div>
        </div>
      </div>
      <!-- 会籍资料 -->
      <div v-if="active === 3 && userInfo.id" class="tab_panel">
        <div class="info_row">
          <div class="info_label">学员编号</div>
          <div class="info_content">{{ studentInfo.studentNumber }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">入馆时间</div>
          <div class="info_content">{{ studentInfo.joiningTime ? studentInfo.joiningTime.slice(0, 10) : '' }}</div>
        </div>
        <div class="info_row">
          <div class="info_label">其他联系方式</div>
          <div class="info_content">
            <template v-if="studentInfo.studentContacts && studentInfo.studentContacts.length > 0">
              <div v-for="item in studentInfo.studentContacts" :key="item.id" class="info_content_concat">
                {{ item.phoneNumber }}  {{ findDictDataByCode('contactType', item.contactTypeCode) }}
              </div>
            </template>
          </div>
        </div>
        <div class="info_row">
          <div class="info_label">专属教练</div>
          <div class="info_content">
            <template v-if="studentInfo.coachNames && studentInfo.coachNames.length > 0">
              <div v-for="item in studentInfo.coachNames" :key="item.id">
                {{ item.name }}
              </div>
            </template>
          </div>
        </div>
        <div class="info_row">
          <div class="info_label">班级</div>
          <div class="info_content">
            <template v-if="studentInfo.classNames && studentInfo.classNames.length > 0">
              <span v-for="item in studentInfo.classNames" :key="item.id" class="class_tag">{{ item.name }}</span>
            </template>
          </div>
        </div>
        <div class="info_row">
          <div class="info_label">道馆会员卡</div>
          <div class="info_content">
            <img class="card_img" src="@/assets/images/card.png">
            <span class="card_num">{{ cardInfo.length }}张</span>
            <span v-if="cardInfo.length > 0" class="card_detail" @click="open">点击查看会员卡详情</span>
          </div>
        </div>
      </div>
    </div>

    <div v-if="showCardInfo" class="card_modal" @click="showCardInfo = false">
      <div class="card_list" @click.stop="stopBuble">
        <div class="card_item_wrap">
          <div v-for="(item, index) in cardInfo" :key="index" class="card_item">
            <div class="card_title gl_clear">
              <div class="card_name gl_fl">{{ item.name }}</div>
            </div>
            <div class="card_detail">
              <div class="card_info_row gl_clear">
                <div class="card_label gl_fl">卡片编号</div>
                <div class="card_content gl_fl">{{ item.cardNumber }}</div>
              </div>
              <div class="card_info_row gl_clear">
                <div class="card_label gl_fl">卡内课时</div>
                <div class="card_content gl_fl">{{ item.classPeriod }}课时</div>
              </div>
              <div class="card_info_row gl_clear">
                <div class="card_label gl_fl">激活时间</div>
                <div class="card_content gl_fl">{{ item.enableDate ? item.enableDate.slice(0, 10) : '' }}</div>
              </div>
              <div class="card_info_row gl_clear">
                <div class="card_label gl_fl">有效时间</div>
                <div class="card_content gl_fl">{{ item.effectiveDate ? item.effectiveDate.slice(0, 10) : '' }}</div>
              </div>
              <div class="card_info_row gl_clear">
                <div class="card_label gl_fl">卡片状态</div>
                <div class="card_content gl_fl">{{ item.studentCardStatus && item.studentCardStatus.name }}</div>
              </div>
            </div>
            <div class="carf_index">{{ index + 1 }}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="!infoAllReady" class="loading">
      <div class="loading_modal">
        <span>加载中</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

import {
  api_GET_EventsManagementRegisterId // 获取注册信息
} from '@/extend/api/gameswaggerApi/app';

import {
  api_GET_ClubStudentStudentInfoStudentId,
  api_GET_ClubStudentCards
} from '@/extend/api/hallswaggerApi/app.js';

export default {
  data() {
    return {
      tabList: [
        {
          name: '基础资料'
        },
        {
          name: '会员资料'
        },
        {
          name: '级段位信息'
        },
        {
          name: '会籍资料'
        }
      ],
      tabStyle: [],
      active: 0,
      userInfo: {},
      studentInfo: {},
      cardInfo: [],
      showCardInfo: false,
      studentId: '',
      registerId: '',
      userInfoReady: false,
      studentInfoReady: false,
      cardInfoReady: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    }),
    infoAllReady () {
      return this.userInfoReady && this.studentInfoReady && this.cardInfoReady;
    }
  },
  created () {
    const { studentId, registerId } = this.$route.query;
    this.studentId = studentId;
    this.registerId = registerId;

    this.getDict();
    this.getDictByType(['district']);
    this.getInfo(registerId);
    this.getStudentInfo(studentId);
    this.getCardInfo(studentId);
  },
  mounted () {
    this.computeTabBarSize();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    getInfo (registerId) {
      this.userInfoReady = false;
      api_GET_EventsManagementRegisterId(registerId, {
        IncludeDelegation: true
      })
        .then(
          res => {
            this.userInfoReady = true;
            this.userInfo = res;
          }
        )
        .catch(
          error => {
            this.userInfoReady = true;
            console.log('getUserInfo -> error: 获取用户信息失败', error);
          }
        );
    },
    getStudentInfo (studentId) {
      this.studentInfoReady = false;
      api_GET_ClubStudentStudentInfoStudentId(studentId)
        .then(
          res => {
            this.studentInfoReady = true;
            this.studentInfo = res;
          }
        )
        .catch(
          error => {
            this.studentInfoReady = true;
            console.log('getUserInfo -> error: 获取用户信息失败', error);
          }
        );
    },
    getCardInfo (studentId) {
      this.cardInfoReady = false;
      api_GET_ClubStudentCards({
        RegisterStudentId: studentId,
        IncludeStudentCardStatus: true
      })
        .then(
          res => {
            this.cardInfoReady = true;
            this.cardInfo = res.items || [];
          }
        )
        .catch(
          error => {
            this.cardInfoReady = true;
            console.log('getUserInfo -> error: 获取用户信息失败', error);
          }
        );
    },
    open () {
      this.showCardInfo = true;
    },
    stopBuble () {
      return false;
    },
    computeTabBarSize () {
      const _htmlDom = document.getElementsByTagName('html')[0];
      const _rootFs = Number.parseFloat(_htmlDom.style.fontSize);
      const _offsetNum = _rootFs ? _rootFs * 0.2 : 20;

      const _tabBarItems = document.getElementsByClassName('tab_bar_item');
      const _list = Array.from(_tabBarItems);
      this.tabStyle = _list.map(item => {
        const _rect = item.getBoundingClientRect();
        return {
          width: _rect.width * 0.5 + 'px',
          tx: _rect.left - _offsetNum + _rect.width * 0.25 + 'px'
        };
      });
    },
    chooseTab (index) {
      this.active = index;
    },
    // 根据code在相应字典中寻找数据
    findDictDataByCode (dictKey, code) {
      const _dict = this.dict[dictKey];
      if (_dict) {
        const _find = _dict.find(item => item.code === code) || {};
        return _find.value || '';
      } else {
        console.log('findDictDataByCode -> findDictDataByCode: ' + dictKey + ', 未找到字典数据.');
        return '';
      }
    },
    // 获取静态图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
  .person_info_wrap {
    position: relative;
  }
  .person_wrap {
    padding: 0.2rem;
  }
  .person_title {
    padding: 0.2rem;
    background: #FFFFFF;
    box-shadow: 0 0.02rem 0.15rem rgba(53, 69, 105, 0.1);
    border-radius: 0.12rem;
  }
  .person_face_wrap {
    margin-right: 0.3rem;
  }
  .person_face {
    width: 0.9rem;
    height: 1.26rem;
    vertical-align: top;
    border-radius: 0.08rem;
  }
  .person_name {
    padding-top: 0.1rem;
    margin-bottom: 0.2rem;
    .name {
      margin-right: 0.3rem;
      font-weight: 500;
      font-size: 0.3rem;
      line-height: 0.42rem;
      color: #353434;
    }
    .gender {
      font-weight: 500;
      font-size: 0.24rem;
      line-height: 0.42rem;
      color: #AFAFAF;
    }
  }
  .person_mobile {
    font-size: 0.24rem;
    line-height: 0.34rem;
    color: #353434;
  }

  .tab_bar_wrap {
    padding: 0 0.2rem;
    color: #8C8C8C;
    background-color: #F5F6F7;
    overflow: hidden;
  }
  .tab_bar {
    position: relative;
    padding: 0.35rem 0;
    white-space: nowrap;
    overflow: auto;
    line-height: 0;
  }
  .tab_bar_item {
    display: inline-block;
    vertical-align: top;
    margin-right: 0.73rem;
    font-size: 0.28rem;
    line-height: 0.4rem;
    font-weight: 500;
  }
  .tab_bar_item.active {
    // font-size: 0.32rem;
    color: #354569;
  }
  .tab_bar_item:last-child {
    margin-right: 0;
  }
  .tab_line {
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 0rem;
    height: 0.06rem;
    background-color: #354569;
    border-radius: 1rem;
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .tab_panel_wrap {
    padding: 0.2rem;
  }
  .tab_panel {
    padding: 0.4rem 0.5rem;
    background: #FFFFFF;
    box-shadow: 0 0.02rem 0.15rem rgba(53, 69, 105, 0.1);
    border-radius: 0.12;
  }
  .info_row {
    display: flex;
    margin-bottom: 0.3rem;
  }
  .info_row:last-child {
    margin-bottom: 0;
  }
  .info_label {
    line-height: 0.36rem;
    font-size: 0.24rem;
    color: #AFAFAF;
    margin-right: 0.3rem;
    flex-shrink: 0;
  }
  .info_content {
    line-height: 0.36rem;
    font-size: 0.26rem;
    color: #353434;
    word-break: break-all;
  }

  .info_content_concat {
    margin-bottom: 0.1rem;
  }

  .certificate_img {
    vertical-align: top;
    width: 2.44rem;
    height: 1.72rem;
    margin-bottom: 0.1rem;
    border-radius: 0.12rem;
  }
  .class_tag {
    display: inline-block;
    vertical-align: top;
    padding: 0 0.12rem;
    background: rgba(207, 55, 46, 0.05);
    border-radius: 34px;
    font-size: 0.22rem;
    line-height: 0.31rem;
    color: #CF372E;
    margin-right: 0.2rem;
  }
  .card_img {
    width: 0.44rem;
    height: 0.29rem;
    vertical-align: top;
    margin-right: 0.24rem;
  }
  .card_num {
    margin-right: 0.28rem;
    vertical-align: top;
  }
  .card_detail {
    color: #957400;
  }

  .card_modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .card_item_wrap {
    padding: 0 1rem;
  }
  .card_list {
    width: 100%;
    height: 4rem;
    white-space: nowrap;
    overflow: auto;
  }

  .card_item {
    position: relative;
    display: inline-block;
    width: 5.36rem;
    height: 3.24rem;
    margin-right: 0.3rem;
    vertical-align: middle;
    background-image: url('../../assets/images/cardBg.png');
    background-size: 100% 100%;
  }
  .carf_index {
    position: absolute;
    bottom: -0.4rem;
    left: 50%;
    width: 0.6rem;
    padding: 0;
    margin-left: -0.3rem;
    font-size: 0.26rem;
    line-height: 0.3rem;
    background: #F8F4E8;
    border-radius: 0.3rem;
    text-align: center;
    color: #949494;
  }
  .card_title {
    width: 100%;
    box-sizing: border-box;
    padding: 0.2rem;
  }
  .card_name {
    display: inline-block;
    vertical-align: top;
    padding: 0 0.26rem;
    line-height: 0.44rem;
    font-size: 0.26rem;
    color: #F6F9FF;
    background: #957400;
    border-radius: 0.25rem;
  }
  .card_detail {
    padding:  0.15rem 0 0 0.3rem;
  }
  .card_label {
    margin-right: 0.2rem;
    font-size: 0.24rem;
    line-height: 0.34rem;
    color: #AFAFAF;
  }
  .card_content {
    font-weight: 500;
    font-size: 0.24rem;
    line-height: 0.34rem;
    color: #354569;
  }
  .card_info_row {
    margin-bottom: 0.1rem;
  }
  .card_info_row:last-child {
    margin-bottom: 0;
  }

  .loading {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .loading_modal {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.4rem;
    height: 2.4rem;
    position: absolute;
    left: 50%;
    top: 30%;
    margin-left: -1.2rem;
    background: rgba(0, 0, 0, .8);
    font-size: 0.32rem;
    color: rgba(255, 255, 255, .8);
    border-radius: 0.08rem;
    text-align: center;
  }

</style>

<style lang="scss">
.card_item_wrap,
.card_modal,
.card_item {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar{
    width: 16px;
    height: 16px;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    background-color: transparent;
    // background-color: rgba(255, 255, 255, .3);
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb{
    border-radius: 8px;
    box-shadow: inset 0 0 16px transparent;
    -webkit-box-shadow: inset 0 0 16px transparent;
    background-color: transparent;
  }
}
</style>
